<!-- 样衣明细弹框 -->
<template>
	<view style="padding: 28rpx 28rpx 74rpx 28rpx;" class="flex_col background_white">
		<!-- top -->
		<view class="flex_row">
			<fl_image :src="main_pic" height="224" width="224" :compress="false"/>
			<view class="flex_col" style="margin-left: 20rpx;">
				<view style="width: 356rpx;height: 80rpx;font-size: 28rpx;color: black;" class="two_lines">{{product_name}}</view>
				<view class="flex_row baseline">
					<view style="font-size: 32rpx;color: black;">¥</view>
					<view style="font-size: 44rpx;color: black;">{{has_login ? format(live_price) : '***'}}</view>
				</view>
				<!-- <view style="margin-top: 16rpx;font-size: 20rpx;color: rgba(171, 176, 176, 1);">时尚版型，重工连衣裙，小香风</view> -->
			</view>
		</view>
		<!-- 面料信息 -->
		
		<view v-if="false" style="padding: 16rpx;background-color: rgba(247, 247, 247, 1);margin-top: 20rpx;" class="flex_row center">
			<view style="font-size: 24rpx;color: rgba(141, 144, 144, 1);">面料信息</view>
			<view class="flex"/>
			<view style="font-size: 24rpx;color: rgba(141, 144, 144, 1);">纯棉 90%/棉麻 8%/其他 2%</view>
		</view>
		<view style="height: 40rpx;"/>
		<view style="font-size: 28rpx;color: black;">样衣全色   {{color_lines}}</view>
		<view style="height: 40rpx;"/>
		<view>尺码</view>
		<view class="flex_row wrap" style="margin-top: 16rpx;">
			<view v-for="item,index in sample_sizes_selected" :key="index">
				<view 
				:class="item.selected ? 'sample_selected' : 'sample_unselected'" 
				@click="click_label(item,index)" style="margin-right:10rpx;margin-top: 10rpx;">
				{{item.label}}</view>
			</view>
		</view>
		<view style="height: 120rpx;"/>
		<fl_btn :enable="!reserved" :text="text" @click="confirmSubmit"/>
	</view>
</template>

<script>
	import {format_money} from "../../utils/utils.js"
	import store from "../../utils/store.js"
	import fl_image from "../fl_image.vue"
	import fl_btn from "../fl_btn"
	export default {
		name:"sample_cloth_detail_dialog",
		components:{
			fl_image,
			fl_btn
		},
		data() {
			return {
				text:"确认选择",
				product_name:"",
				product_code:"",
				color_lines:"",
				size_lines:"",
				selling_point:"",
				fabric:"",
				main_pic:"",
				live_price:"",
				supply_price:"",
				sample_colors:[],
				sample_sizes:[],
				has_login:false
			};
		},
		props:{
			sample_info: {},//样衣明细
			sample_sizes_selected: Array ,//尺码信息
			reserved:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			format(price){
				return format_money(price)
			},
			confirmSubmit(){
				this.$emit("confirmSubmitSize",this.sample_info)
			},
			click_label(nowItem,nowIndex){
				if(!nowItem.selected){
					this.sample_sizes_selected.forEach((item,index) => {
						if(index === nowIndex){
							item.selected = true
							this.sample_info.selected = true
							this.sample_info.chosen_size_id = item.value
							this.sample_info.chosen_size_name = item.label
						}else{
							item.selected = false
						}
					})
				}
				this.$emit("submitCloth",this.sample_sizes_selected)
			},
			set_sample(sample){
				console.log(sample)
				this.product_name = sample.product_name
				this.product_code = sample.product_code
				this.color_lines = sample.color_lines
				this.size_lines = sample.size_lines
				this.selling_point = sample.selling_point
				this.fabric = sample.fabric
				this.main_pic = sample.main_pic
				this.live_price = sample.live_price
				this.supply_price = sample.supply_price
				this.sample_colors = sample.sample_colors
				this.sample_sizes = sample.sample_sizes
			},
		},
		mounted() {
			console.log("sample")
			console.log(this.sample)
			
		},
		created(){
			console.log(this.reserved)
			// if(this.reserved){
			// 	this.text = "货盘已预约"
			// }
			this.has_login = store.state.hasLogin
		},
	}
</script>

<style lang="scss">
.sample_selected{
		display: flex;
		height: 60rpx;
		align-items: center;
		justify-content: center;
		// width: 120rpx;
		padding: 14rpx 40rpx;
		border-radius: 4rpx;
		border: solid 2rpx rgba(0, 194, 196, 1);
		background-color: #E8F7F7;
	}
	.sample_unselected{
		display: flex;
		height: 60rpx;
		align-items: center;
		justify-content: center;
		// width: 120rpx;
		padding: 14rpx 40rpx;
		border-radius: 4rpx;
		border: solid 2rpx rgba(239, 239, 239, 1);
		background-color: white;
	}
</style>
